<template>
	<app-layout>
		<view class='status'>
			<image class='status-bg' :src='clerkImg.detail'></image>
			<view class="status-text" v-if="detail.status == 1">已核销</view>
			<view class='status-info' v-if="detail.status == 1">
				核销时间：{{detail.created_at}}
			</view>
			<view class="status-text" v-if="detail.status == 0">未核销</view>

			<view v-if="card_id > 0" class="card-info">
				<view class='dir-left-nowrap cross-center'>
					<!-- <image class="card-img" :src='detail.pic_url'></image> -->
					<view class="card-name t-omit-two">{{detail.coupon.name}}</view>
				</view>
				<view class='card-other'>
					<!-- <view v-if="detail.is_show_history" class="history-button" @click="isShow = true">
						<span>历史核销记录</span>
						<image class="icon" src="/static/image/icon/red-arrow.png"></image>
					</view> -->
					<view class='other-label'>有效时间</view>
					<view>自发放时间起{{detail.coupon.expire_day}}天</view>
					<view class='other-label'>发放时间</view>
					<view>{{detail.coupon.created_at}}</view>
					<!-- <view class='other-label'>使用说明</view>
					<text>{{detail.content}}</text> -->
				</view>
			</view>
		</view>
		<!-- <view v-if="detail.is_show_history == 1" class='order-info'
			:style="{'margin-bottom': `${detail.clerk_id > 0 ? '12':'28'}px;`}">
			<view class='info-title'>核销信息</view>
			<view class="dir-left-nowrap price-item">
				<view class="price-label">剩余次数：</view>
				<view>{{detail.number - detail.use_number}}次</view>
			</view>
			<view class="dir-left-nowrap price-item">
				<view class="price-label">已核销次数：</view>
				<view>{{detail.use_number}}次</view>
			</view>
			<view class="dir-left-nowrap price-item">
				<view class="price-label">总次数：</view>
				<view>{{detail.number}}次</view>
			</view>
		</view> -->
		<view style="height: 140rpx; width: 100%"></view>
		<!-- <view v-if="detail.clerk_id == 0 && id > 0 && detail.is_pay == 1 && detail.cancel_status == 0"
			@click="toClerk(detail.id)" class="to-clerk">
			<button>去核销</button>
		</view>
		<view v-if="detail.clerk_id == 0 && id > 0 && detail.is_pay == 0 && detail.cancel_status == 0" class="to-clerk"
			@click="checkPay=!checkPay">
			<button>确认收款</button>
		</view>
		<view v-if="detail.is_use == 0 && card_id > 0 && detail.receive_id == 0" @click="toClerkCard(detail.id)"
			class="to-clerk">
			<button>去核销</button>
		</view>
		<view class="bg cross-center main-center" v-if="checkPay">
			<view class="dialog">
				<view class="dialog-title">提示</view>
				<view class="dialog-msg">确认是否已当面支付款项给您！</view>
				<view class="dialog-btn main-center">
					<view @click="checkPay=!checkPay" class="dialog-close">取消</view>
					<view class="line"></view>
					<view class="dialog-submit" @click="clerkAffirmPay">确认</view>
				</view>
			</view>
		</view>
		<app-clerk-historys :user-card-id="detail.id" :is-show.sync="isShow"></app-clerk-historys> -->
	</app-layout>
</template>

<script>
	import appClerkHistorys from '../../../components/page-component/app-clerk-historys/app-clerk-historys.vue';
	import appFormData from "../../../components/basic-component/app-order/app-form-data.vue";

	import {
		mapState
	} from "vuex";
	let mallurl = null
	export default {
		name: "detail",
		components: {
			appClerkHistorys,
			appFormData,
		},
		data() {
			return {
				detail: {
					start_time: '',
					end_time: '',
				},
				card_id: null,
				owner_id: null,
				checkPay: false,
				id: null,
				isShow: false,
			};
		},
		computed: {
			...mapState({
				clerkImg: state => state.mallConfig.__wxapp_img.clerk,
				storemall: state => state.malid.apimaUrl
			}),
		},
		onLoad(options) {
			console.log(options);
			this.card_id = options.card_id;
			this.owner_id = options.uid || null;
			uni.setNavigationBarTitle({
				title: "抵用券详情",
			})
		},
		onShow: function() {
			this.getCardDetail();
		},
		methods: {
			getCardDetail() {
				let that = this;
				let url = that.$api.voucher.list
				that.$request({
					url: url,
					data: {
						id: that.card_id,
						user_id: that.owner_id
					},
				}).then(response => {
					that.$hideLoading();
					if (response.code == 0) {
						that.detail = response.data.list[0]
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					that.$hideLoading();
				});
			},
			clerkAffirmPay() {
				let that = this;
				that.$request({
					url: that.$api.order.clerk_affirm_pay,
					data: {
						id: that.id,
						action_type: 1,
					},
				}).then(response => {
					that.$hideLoading();
					if (response.code == 0) {
						that.checkPay = !that.checkPay;
						that.getDetail();
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(response => {
					that.$hideLoading();
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.status {
		position: relative;
		padding-top: #{140rpx};
	}

	.status-price {
		margin-top: #{4rpx};
	}

	.status-bg {
		position: absolute;
		top: 0;
		left: 0;
		height: #{220rpx};
		width: 100%;
		z-index: 0;
	}

	.status-text {
		font-size: #{32rpx};
		color: #fff;
		position: absolute;
		top: #{42rpx};
		left: #{48rpx};
	}

	.address-info {
		width: #{702rpx};
		margin: 0 auto;
		font-size: #{26rpx};
		color: #353535;
		background-color: #fff;
		border-radius: #{16rpx};
		position: relative;
		padding: #{28rpx} #{24rpx} #{28rpx} #{92rpx};
	}

	.address-info image {
		position: absolute;
		top: #{40rpx};
		left: #{24rpx};
		height: #{44rpx};
		width: #{44rpx};
	}

	.address {
		margin-top: #{8rpx};
	}

	.order-info {
		margin: #{24rpx} #{38rpx};
		padding: #{28rpx} #{24rpx};
		background-color: #fff;
		border-radius: #{16rpx};
	}

	.goods {
		height: #{160rpx};
		position: relative;
		margin-bottom: #{20rpx};
	}

	.goods image {
		height: #{160rpx};
		width: #{160rpx};
		border-radius: #{10rpx};
		float: left;
		margin-right: #{20rpx};
	}

	.goods-info {
		font-size: #{24rpx};
		color: #999999;
	}

	.goods-name {
		color: #353535;
		height: #{72rpx};
	}

	.goods-price {
		color: #353535;
		font-size: #{24rpx};
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.total {
		font-size: #{24rpx};
		margin-top: #{28rpx};
		color: #999999;
		text-align: right;
	}

	.price-item {
		margin-top: #{10rpx};
		font-size: #{24rpx};
		color: #353535;
	}

	.price-item:first-of-type {
		margin-top: #{24rpx};
	}

	.price-label {
		color: #999;
		font-size: #{24rpx};
	}

	.price-label.total-label {
		font-size: #{24rpx};
		color: #353535;
	}

	.total-price {
		font-size: #{28rpx};
		color: #ff4544;
		font-weight: bold;
	}

	.info-title {
		font-size: #{24rpx};
		color: #353535;
		margin-bottom: #{20rpx};
	}

	.status-info {
		position: absolute;
		right: #{48rpx};
		top: #{42rpx};
		color: #fff;
		font-size: #{24rpx};
		text-align: right;
	}

	.to-clerk {
		position: fixed;
		bottom: 0;
		height: 140#{rpx};
		width: 100%;
		padding: 0 24#{rpx};
		border-top: 1#{rpx} solid #e2e2e2;
		background: #ffffff;
		display: flex;
		align-items: center;

	}

	.to-clerk button {
		width: #{702rpx};
		margin: 0 auto;
		font-size: #{32rpx};
		color: #fff;
		height: #{88rpx};
		line-height: #{88rpx};
		border-radius: #{44rpx};
		background-color: #ff4544;
		text-align: center;
	}

	.card-info {
		width: 90%;
		margin: 0 auto;
		border-radius: #{15rpx};
		background-color: #fff;
		position: relative;
		padding: #{40rpx} #{24rpx};
		margin-bottom: #{20rpx};
	}

	.card-img {
		height: #{88rpx};
		width: #{88rpx};
		margin-right: #{20rpx};
		border-radius: #{44rpx};
	}

	.card-name {
		font-size: #{32rpx};
		color: #353535;
		width: #{546rpx};
	}

	.info-label {
		color: #999999;
	}

	.card-other {
		text-align: left;
		font-size: #{28rpx};
		margin-top: #{40rpx};
		color: #353535;
		border-top: #{1rpx} solid #e2e2e2;
	}

	.other-label {
		color: #999999;
		margin: #{30rpx} 0 #{22rpx};
	}

	.bg {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, .3);
		z-index: 10;
	}

	.dialog {
		position: fixed;
		top: #{400rpx};
		left: 0;
		right: 0;
		height: #{300rpx};
		width: #{640rpx};
		margin: 0 auto;
		z-index: 21;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
		font-size: #{30rpx};
	}

	.dialog-title {
		margin: #{40rpx} auto #{35rpx};
	}

	.dialog-msg {
		color: #ff4544;
	}

	.dialog-btn {
		height: #{88rpx};
		width: #{640rpx};
		border-top: #{1rpx} solid #e2e2e2;
		line-height: #{88rpx};
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.dialog-close,
	.dialog-submit {
		width: 50%;
	}

	.line {
		height: #{44rpx};
		margin-top: #{22rpx};
		width: #{1rpx};
		background-color: #e2e2e2;
	}

	.dialog-submit {
		color: #ff4544;
	}

	.goods-attr {
		margin-bottom: #{16rpx};
	}

	.goods-attr text {
		margin-right: #{18rpx};
	}

	.history-button {
		width: 215#{rpx};
		height:60#{rpx};
		padding:18#{rpx} 23#{rpx};
		display: flex;
		color: #ff4544;
		font-size:24#{rpx};
		margin:30#{rpx} 0;
		align-items: center;
		justify-content: center;
		background: #ffebeb;
		border-radius: 30#{rpx};

		.icon {
			width: 12#{rpx};
			height:22#{rpx};
			margin-left:12#{rpx};
		}
	}
</style>
